<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="/lib/layui/css/layui.css" rel="stylesheet"/>
<link href="/css/common.css" rel="stylesheet"/>
<title>添加编辑菜单</title>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space10">
        <div class="layui-card">
            <div class="layui-card-body">
                <form class="layui-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="layui-color-red">*</span>&nbsp;上级目录：
                        </label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" name="parentName" lay-verify="required" placeholder="上级目录" autocomplete="off"
                                   readonly>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="layui-color-red">*</span>&nbsp;菜单类型：
                        </label>
                        <div class="layui-input-block">
                            <select id="menuType" name="menuType" lay-filter="menuType" lay-verify="required" title=""></select>
                        </div>
                    </div>
                    <div class="layui-form-item showJumpType" style="display: none">
                        <label class="layui-form-label"><span class="layui-color-red">*</span>&nbsp;跳转类型：
                        </label>
                        <div class="layui-input-block">
                            <select id="jumpType" name="jumpType" title=""></select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="layui-color-red">*</span>&nbsp;菜单名称：
                        </label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" name="menuName" lay-verify="required" placeholder="请输入菜单名称" autocomplete="off">
                        </div>
                    </div>
                    <div class="layui-form-item showUrl" style="display: none">
                        <label class="layui-form-label"><span class="layui-color-red">*</span>&nbsp;请求地址：
                        </label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" name="menuUrl" placeholder="请输入请求地址" autocomplete="off">
                        </div>
                    </div>
                    <div class="layui-form-item showIcon" style="display: none">
                        <label class="layui-form-label">菜单图标：</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" name="menuIcon" placeholder="请输入菜单图标" autocomplete="off">
                        </div>
                    </div>
                    <div class="layui-form-item showPermission" style="display: none">
                        <label class="layui-form-label">权限字符：</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" name="permission" placeholder="请输入权限字符" autocomplete="off">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="layui-color-red">*</span>&nbsp;排序：
                        </label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" name="orderNum" lay-verify="required|number" placeholder="请输入排序" autocomplete="off">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input type="hidden" name="id">
                            <input type="hidden" name="parentId">
                            <button class="layui-btn" lay-filter="submitBtn" lay-submit data-url="/system/menu/saveOrUpdate.do">提交</button>
                            <button class="layui-btn layui-hide" type="button" id="submit">提交</button>
                            <button class="layui-btn layui-btn-primary" type="button" id="cancel">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="/lib/layui/layui.all.js" charset="utf-8"></script>
<script src="/script/common.js" charset="utf-8"></script>
<script>
    var id = getRequestParams('id');
    var parentId = getRequestParams('parentId');

    layui.use(['baseUtil'], function () {
        var $ = layui.jquery,
            form = layui.form,
            baseUtil = layui.baseUtil;

        $('input[name=id]').val(id);
        $('input[name=parentId]').val(parentId);

        if (isBlank(id)) {
            $('.showIcon').show();
            baseUtil.initDict('menuType,jumpType', function (dictContent) {
                baseUtil.initSelect(dictContent, 'menuType');
                baseUtil.initSelect(dictContent, 'jumpType', '2');
                if (isBlank(parentId)) {
                    //根目录添加
                    $('input[name=parentName]').val('根目录');
                } else {
                    //子目录添加
                    baseUtil.doPostData('/system/menu/findOne.do', { id: parentId }, function (data) {
                        $('input[name=parentName]').val(data.menuName);
                    });
                }
            });
        } else {
            baseUtil.initDict('menuType,jumpType', function (dictContent) {
                var url = '/system/menu/findVoOne.do';
                var params = { id: id };
                var cols = [
                    { type: 'select', name: 'menuType', selectType: '', dictContent: dictContent },
                    { type: 'select', name: 'jumpType', dictContent: dictContent },
                    { type: 'input', name: 'menuName' },
                    { type: 'input', name: 'menuUrl' },
                    { type: 'input', name: 'menuIcon' },
                    { type: 'input', name: 'orderNum' }
                ];
                if (isBlank(parentId)) {
                    //根目录编辑
                    $('input[name=parentName]').val('根目录');
                } else {
                    //子目录编辑
                    cols.push({ type: 'input', name: 'parentName' });
                }
                baseUtil.initFormData(url, params, cols, function (data) {
                    showPage(data.menuType, data.jumpType);
                });
            });
        }

        form.on('select(menuType)', function (data) {
            showPage(data.value, '');
        });

        function showPage (value, jumpTypeValue) {
            var menuUrl = $('input[name=menuUrl]');
            var jumpType = $('#jumpType');
            var permission = $('input[name=permission]');
            var menuIcon = $('input[name=menuIcon]');
            if ('0' === value) {
                $('.showUrl').hide();
                menuUrl.val('');
                menuUrl.attr('lay-verify', '');
                $('.showJumpType').hide();
                jumpType.val(jumpTypeValue);
                form.render('select');
                jumpType.attr('lay-verify', '');
                $('.showIcon').show();
                $('.showPermission').hide();
                permission.val('');
                permission.attr('lay-verify', '');
            } else if ('1' === value) {
                $('.showUrl').show();
                menuUrl.attr('lay-verify', 'required');
                $('.showJumpType').show();
                jumpType.val(jumpTypeValue);
                form.render('select');
                jumpType.attr('lay-verify', 'required');
                $('.showIcon').hide();
                menuIcon.val('');
                menuIcon.attr('lay-verify', '');
                $('.showPermission').hide();
                permission.val('');
                permission.attr('lay-verify', '');
            } else if ('2' === value) {
                $('.showUrl').hide();
                menuUrl.val('');
                menuUrl.attr('lay-verify', '');
                $('.showJumpType').show();
                jumpType.val(jumpTypeValue);
                form.render('select');
                jumpType.attr('lay-verify', 'required');
                $('.showIcon').show();
                $('.showPermission').show();
                permission.attr('lay-verify', 'required');
            }
            parent.layer.iframeAuto(parent.layer.getFrameIndex(window.name));
        }
    });
</script>
</body>
</html>
